<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 需求: 描述一只猫的 名字 颜色 种族 技能 叫声

    // 面向过程   => 分析解决问题的步骤,然后通过变量和函数一一实现,使用时依次调用即可
    // var name = "Tom";
    // var color = "black";
    // var species = "Cat";
    // function skill(){
    //     console.log("捉老鼠");
    // }
    // function call(){
    //     console.log("喵喵");
    // }

    // 面向对象 =>  思想上的提升,  就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)

    // 1. 字面量对象(最简单的面向对象)
    // var Tom = {
    //     name: "Tom",
    //     color: "black",
    //     species: "Cat",
    //     skill() {
    //         console.log("捉老鼠");
    //     },
    //     call() {
    //         console.log("喵喵");
    //     }
    // }

    // var Kitty = {
    //     name: "Kitty",
    //     color: "black",
    //     species: "Cat",
    //     skill() {
    //         console.log("捉老鼠");
    //     },
    //     call() {
    //         console.log("喵喵");
    //     }
    // }


    // 2. 函数版(简易工厂模式)
    // 优点 => 可以根据给定参数快速生成对
    // 缺点:
    // 1. 通过函数创建的对象和函数没有关系  => 不是通过构造函数创建的
    // 2. 公有的属性和方法重复声明 => 占内存

    var arr = new Array(1,2,3,4);
    var obj = new Object({a:1,b:2});
    var s = new Set([1,1,2,3,1,2]);

    // instanceof  判断某个数据是否是由某个构造函数创建的
    console.log(arr instanceof Array);  // true
    console.log(obj instanceof Object); // true
    console.log(s instanceof Set);  //true




    function cat(name,color) {
        var obj = { // 字面量对象 => new Object
            name: name,
            color: color,
            species: "Cat",
            skill() {
                console.log("捉老鼠");
            },
            call() {
                console.log("喵喵");
            }
        }
        return obj;
    }

    var Tom = cat("Tom","black");
    console.log(Tom);

    var Kitty = cat("Kitty","pink");
    console.log(Kitty);

    var Duola = cat("Duola","blue");
    console.log(Duola);







</script>

</html>